<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn ref="cpn3"></cpn>
  <button @click="btnClick">按钮</button>
</div>
<template id="cpn">
  <div>
    <h2>我是cpn组件</h2>
    <p>我是哈哈</p>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  /**
   * 组建通信  父组件调用子组件  $children
   */
  const app=new Vue({
    el: '#app',
    data: {
      message:'你好vue',
    },
    methods:{
      btnClick(){
        /**
         * 通过 $children 访问得到父组件所有的子组件 是一个数组
         * 但是一般不这么访问，因为你需要访问具体的某个子组件，不能靠数组的索引，因为可能父组件 随意增加子组件
         * 需要换一种方式访问
         */
        // console.log(this.$children)
        // console.log(this.$children[0].name)
        // console.log("btnClick")

        /**
         * $refs 访问返回一个对象  key-value，key2-value2
         * 子组件需要绑定属性 ref
         * <cpn ref="cpn3"></cpn>
         *
         * key代表 ref对应的值  value VUeComponent 对象
         */
        console.log(this.$refs)
        console.log(this.$refs.cpn3)
        console.log(this.$refs.cpn3.name)
      }
    },
    components:{
      cpn:{
        template: '#cpn',
        data(){
          return {
            name: '我是子组件的name属性'
          }
        }
      }
    }
  })
</script>
</body>
</html>